<!-- 慢病患者管理率 -->
<template>
    <div id="management"></div>
</template>
<script>
import * as echarts from "echarts";
import { getManagementData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            formData: [
                {
                    name: "人民医院",
                    value: 0,
                },
                {
                    name: "二院",
                    value: 0,
                },
                {
                    name: "中医院",
                    value: 0,
                },
                {
                    name: "妇幼保健",
                    value: 0,
                },
                {
                    name: "乡镇卫生院",
                    value: 0,
                },
            ],
        };
    },
    mounted() {
        this.setEcharts()
    },
    methods: {
        //设置echarts
        setEcharts() {
            const data = new Array(5).fill(0).map(() => Mock.Random.natural(10, 30));
            data.forEach((item, index) => {
                this.formData[index].value = parseInt(
                    item
                );
            });

            let management = echarts.init(
                document.getElementById("management")
            );
            let name = this.formData.map((item) => item.name);
            let seriesObjs = [];
            let r = 100;
            let color = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0"];
            let placeHolderStyle = {
                normal: {
                    label: {
                        show: false,
                        position: "center",
                    },
                    labelLine: {
                        show: false,
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0,
                },
            };
            for (let i = 0; i < this.formData.length; i++) {
                //            legendData.push(this.formData[i].name)
                let seriesObj = {
                    name: this.formData[i].name,
                    type: "pie",
                    center: ["35%", "50%"],
                    clockWise: false,
                    radius: [r - 1 - i * 20, r - i * 20],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: "center",
                            },
                            labelLine: {
                                show: false,
                            },
                            borderWidth: 5,
                            shadowBlur: 50,
                            borderColor: color[i],
                            shadowColor: "rgba(142,152,241, 0.6)",
                        },
                        //                    emphasis: {
                        //                      borderColor: 'rgb(142,152,241)',
                        //                      shadowColor: 'rgba(142,152,241, 0.6)'
                        //                    }
                    },
                    hoverAnimation: false,
                    data: [
                        {
                            value: this.formData[i].value,
                        },
                        {
                            value: (this.formData[0].value * 4) / 3 - this.formData[i].value,
                            name: "invisible",
                            itemStyle: placeHolderStyle,
                        },
                    ],
                };
                seriesObjs.push(seriesObj);
            }
            let option = {
                tooltip: {
                    show: false,
                    formatter: "{a} : {c}",
                },
                color: color,
                legend: {
                    show: true,
                    type: "plain",
                    icon: "circle",
                    top: "center",
                    left: "63%",
                    data: name,
                    orient: "vertical",
                    formatter: (name) => {
                        return (
                            "{title|" +
                            name +
                            "}  {value|" +
                            this.formData.find((item) => {
                                return item.name == name;
                            }).value +
                            "}{value| %}"
                        );
                    },
                    textStyle: {
                        rich: {
                            title: {
                                width: 100,
                                fontSize: 16,
                                lineHeight: 20,
                                color: "#3bd2fe",
                            },
                            value: {
                                fontSize: 16,
                                lineHeight: 20,
                                color: "#fff",
                            },
                        },
                    },
                },
                toolbox: {
                    show: false,
                },
                series: seriesObjs,
            };
            management.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#management {
    width: 100%;
    height: 100%;
}
</style>